<template>
	<view class="deatil">
		<custom-navbar :title="pageTitle" :statusBarHeight="statusBarHeight" :navBarHeight="navBarHeight"
			:windowWidth="windowWidth" :color="color" :backgroundColor="backgroundColor"></custom-navbar>
		<u-swiper :list="query.image_list" height="550" mode="number" interval="5000" indicator-pos="bottomRight" @click.stop="openImage" class=""></u-swiper>
		<view class="main_box">
			<view class="information">
				<image :src="query.avatar" mode="aspectFill" class="profile-photo u-skeleton-circle" @click.stop="$PREVIEW_IMAGE(query.avatar)"></image>
				<view class="right_comlumn">
					<view class="name u-skeleton-rect">
						<text>{{query.nickname}}</text>
						<image :src="query.star_image" mode="" class="star" v-if="query.star_image"></image>
					</view>
					<view class="row_box">
						<view class="synthesize u-skeleton-rect">
							{{query.point}}分
						</view>
						<view class="dashed-box">
							
						</view>
						<view class="serve u-skeleton-rect">
							服务{{query.serve}}
						</view>
						<view class="major u-skeleton-rect">
							专业{{query.major}}
						</view>
					</view>
					<view class="bottom_box u-skeleton-rect" @click="open">
						<view class="flex">
							<view v-for="(item,index) in query.label_list" :key="index" class="item">
								<image :src="item.image" mode="aspectFill" class="img"></image>
							</view>
						</view>
						<u-icon name="arrow-right" color="#999999" size="14" class="icon"></u-icon>
					</view>
				</view>
			</view>
			<view class="main_comlum_box ">
				<view class="achievement">
					<view class="center_box">
						<view class="header_box ">
							<view class="number u-skeleton-rect">
								{{query.course_num}}
							</view>
							<view class="size u-skeleton-rect">
								节
							</view>
						</view>
						<view class="foot_size u-skeleton-rect">
							<text>累计上课</text>
						</view>
					</view>
					<view class="center_box" @click.stop="$PREVIEW_IMAGEARRAY(query.cert_list)">
						<view class="header_box">
							<view class="number u-skeleton-rect">
								{{query.cert_num}}
							</view>
							<view class="size u-skeleton-rect">
								本
							</view>
						</view>
						<view class="foot_size u-skeleton-rect">
							<text>证书</text>
							<image :src="$IMG_URL('/static/newVersion/activeRight.png')" mode="" class="icon"></image>
						</view>
					</view>
					<view class="center_box">
						<view class="header_box">
							<view class="number u-skeleton-rect">
								{{query.vea}}
							</view>
							<view class="size u-skeleton-rect">
								%
							</view>
						</view>
						<view class="foot_size u-skeleton-rect">
							<text>好评率</text>
						</view>
					</view>
					<view class="center_box"  @click.stop="routeEvaluate">
						<view class="header_box">
							<view class="number u-skeleton-rect">
								{{query.vea_num}}
							</view>
							<view class="size u-skeleton-rect">
								条
							</view>
						</view>
						<view class="foot_size u-skeleton-rect">
							<text>评价</text>
							<image :src="$IMG_URL('/static/newVersion/activeRight.png')" mode="" class="icon"></image>
						</view>
					</view>
				</view>
				<view class="scound-box u-skeleton-fillet">
					<view class="content">
						{{query.bio}}
					</view>
					<view class="good-at u-skeleton-rect">
						<image :src="$IMG_URL('/static/coach/tag4.png')" mode="" class="tag4 u-skeleton-circle"></image>
						<view class="title u-skeleton-rect">
							擅长
						</view>
						<view class="goot-right">
							<view v-for="(item,index) in query.domain_list" :key="index" class="itemTag">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
				<site :siteList="query.shop_list" :title="'服务场地'" class="u-skeleton-fillet"></site>
				<view class="course u-skeleton-fillet">
					<view class="course_title">
						课程
					</view>
					<view class="course_comlumn">
						<view v-for="(item,index) in query.course_list" :key="index" class="course_Item">
							<image :src="item.image" mode="aspectFill" class="uimg"
								@click="routeCourseDeatil(item,index)"></image>
							<view class="right_comlumn" @click="routeCourseDeatil(item,index)">
								<view class="title">
									{{item.title}}
								</view>
								<view class="content">
									{{item.intro}}
								</view>
								<view class="row-box">
									<view v-for="(Skuitem,Skuindex) in item.sku" :key="Skuindex" class="Skuitem">
										{{Skuitem}}
									</view>
								</view>
								<view class="bottom">
									<view class="left">
										<view class="rows">
											<text class="red size1">￥</text>
											<text class="red size2">{{item.price}}</text>
											<text class="red size3">/{{item.unit}}</text>
										</view>
										<view class="rows">
											<text class="td size3 gray" v-if="item.cost">￥{{item.cost}}/{{item.unit}}</text>
										</view>
										
									</view>
									<view class="btn" @click="$ROUTELINK('purchase?course=' + item.course)">
										购买
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		<PrivateEducationRights :popupShow="popupShow" :tagList="query.label_list" @sure="sure">
		</PrivateEducationRights>
	</view>
</template>

<script>
	import CustomNavbar from '@/components/navbar/navbar.vue';
	import PrivateEducationRights from '../components/Private-education-rights.vue'
	import site from '@/components/site.vue';
	import {
		coachDeadil
	} from '@/api/coach.js'
	export default {
		components: {
			CustomNavbar,
			PrivateEducationRights,
			site
		},
		data() {
			return {
				loading:false,
				from: {},
				// 弹窗
				popupShow: false,
				// 自定义导航栏
				color: '#ffffff',
				backgroundColor: 'transparent',
				statusBarHeight: 20,
				navBarHeight: 45,
				windowWidth: 375,
				pageTitle: '',
				// banner
				bannerlist: [],
				query: {}
			}
		},
		onPageScroll(e) {
			console.log(e.scrollTop);
			if (e.scrollTop >= 100) {
				this.backgroundColor = '#ffffff',
					this.color = '#000000'
			} else {
				this.backgroundColor = 'transparent',
					this.color = '#ffffff'
			}
		},
		onLoad(e) {
			console.log('e', e);
			this.from = e
		},
		onShow() {
			this.getcoachDeadil(this.from)
		},
		methods: {
			openImage(e){
				console.log('openImage', e);
				this.$PREVIEW_IMAGEARRAY(this.query.image_list)
			},
			routeEvaluate(){
				uni.navigateTo({
					url:'/pageA/course/evaluate?coach_id=' + this.from.coach_id + '&form=' + 'coach'
				})
			},
			routeCourseDeatil(item, index) {
				uni.navigateTo({
					url: '/pageA/course/detail?course=' + item.course
				})
			},
			open() {
				this.popupShow = true
			},
			sure(data) {
				this.popupShow = data
			},
			getcoachDeadil() {
				// 显示加载动画
				uni.showLoading();
				this.loading = true
				coachDeadil(this.from).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.loading = false
						this.query = res.data
						this.$u.mpShare = {
							title: '教练' + this.query.nickname, // 默认为小程序名称，可自定义
							path: '/pageA/shop/coach/deatil?coach_id=' + this.from.coach_id, // 默认为当前页面路径，一般无需修改，QQ小程序不支持
							imageUrl: this.query.avatar, 
						}
					}else{
						this.$SHOWMODALMSG('', res)
					}
				}).finally(()=>{
					uni.hideLoading();
				}) 
			}
		},
		created() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
			this.statusBarHeight = info.statusBarHeight
			this.windowWidth = info.windowWidth
			// 除了h5 app mp-alipay的情况下执行
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			console.log(menuButtonInfo);
			// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
			this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
				.statusBarHeight)
			this.windowWidth = menuButtonInfo.left
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	// 虚线
	.dashed-box{
		width: 2rpx;
		height: 28rpx;
		border: 1rpx solid #e9e9e9;
		margin: 0 11rpx;
	}
	.deatil {
		display: flex;
		flex-direction: column;

		.main_box {
			width: 750rpx;
			margin-top: -22rpx;
			background: #e9e9e9;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: hidden;
			z-index: 10;
			// padding: 22rpx 24rpx;
			overflow: hidden;

			.information {
				width: 100%;
				display: flex;
				flex-direction: row;
				background: linear-gradient(180deg, #ffffff, #e9e9e9);
				padding: 22rpx 24rpx 20rpx;

				.profile-photo {
					width: 160rpx;
					height: 160rpx;
					background: rgba(0, 0, 0, 0.00);
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.right_comlumn {
					display: flex;
					flex-direction: column;
					width: 500rpx;

					.name {
						display: flex;
						flex-direction: row;
						align-items: center;
						font-size: 36rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
						margin-bottom: 8rpx;
						.star{
							width: 54rpx;
							height: 30rpx;
							margin-left: 12rpx;
						}
					}

					.row_box {
						display: flex;
						flex-direction: row;
						align-items: baseline;
						margin-bottom: 26rpx;

						.synthesize {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: left;
							color: #f37364;
						}

						.serve {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #666666;
						}

						.major {
							margin-left: 10rpx;
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #666666;
						}
					}

					.bottom_box {
						display: flex;
						flex-direction: row;
						align-items: center;
						width: 100%;

						.item {
							margin-right: 8rpx;
							height: 42rpx;
							width: 150rpx;

							.img {
								width: 100%;
								height: 100%;
							}
						}

						.flex {
							flex: 1;
							display: flex;
							flex-direction: row;
							align-items: center;
						}
					}
				}
			}

			.main_comlum_box {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 24rpx;
			}

			.achievement {
				margin-top: 12rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-around;

				.center_box {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 168rpx;
					height: 130rpx;
					border-radius: 16rpx;
					padding-top: 20rpx;

					.header_box {
						display: flex;
						flex-direction: row;
						align-items: baseline;
						margin-bottom: 8rpx;

						.number {
							font-size: 40rpx;
							font-family: DIN, DIN-Bold;
							font-weight: 700;
							text-align: center;
							color: #333333;
						}

						.size {
							font-size: 20rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: center;
							color: #333333;
						}
					}

					.foot_size {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: center;
						color: #666666;
						display: flex;
						flex-direction: row;
						align-items: center;

						.icon {
							margin-left: 5rpx;
							width: 10rpx;
							height: 16rpx;
						}
					}
				}
			}

			.scound-box {
				width: 100%;
				padding: 20rpx 24rpx;
				background: #ffffff;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 24rpx;

				.content {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #666666;
					width: 100%;
					border-bottom: 1rpx solid rgb(235, 235, 235);
					padding-bottom: 12rpx;
				}

				.good-at {
					display: flex;
					flex-direction: row;
					align-items: baseline;
					padding-top: 22rpx;

					.tag4 {
						width: 42rpx;
						height: 42rpx;
						margin-right: 6rpx;
					}

					.title {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #f37364;
						margin-right: 24rpx;
					}

					.goot-right {
						flex: 1;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;
						flex-wrap: wrap;
					}

					.itemTag {
						margin: 0rpx 8rpx 8rpx 0;
						height: 38rpx;
						padding: 0 8rpx;
						background: #f6f6f6;
						border-radius: 4rpx;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #666666;
						display: flex;
						align-items: center;
						justify-content: center;
						
					}
				}
			}

			.course {
				width: 100%;
				background: #ffffff;
				border-radius: 16rpx;
				padding: 20rpx 24rpx;
				display: flex;
				flex-direction: column;

				.course_title {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Heavy;
					font-weight: 800;
					text-align: left;
					color: #333333;
					margin-bottom: 24rpx;
				}

				.course_Item {
					display: flex;
					flex-direction: row;
					width: 100%;
					height: 230rpx;
					margin-bottom: 26rpx;

					.uimg {
						width: 230rpx;
						height: 230rpx;
						background: rgba(0, 0, 0, 0.00);
						border-radius: 16rpx;
						margin-right: 20rpx;
					}

					.right_comlumn {
						display: flex;
						flex-direction: column;
						flex: 1;
						height: 100%;
						border-bottom: 1rpx solid #e9e9e9;
						padding-bottom: 22rpx;

						.title {
							font-size: 32rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: left;
							color: #333333;
							margin-bottom: 4rpx;
						}

						.content {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #666666;
							overflow: hidden;

							/* 设置文本如何换行 */
							display: -webkit-box;
							-webkit-line-clamp: 2;
							/* 显示多少行，这里设置3行 */
							-webkit-box-orient: vertical;

							/* 可选：设置文本如何换行和如何处理单词 */
							word-break: break-all;
							/* 或者使用 word-wrap: break-word; */

							/* 可选：设置文本对齐方式 */
							text-align: justify;
							margin-bottom: 12rpx;
						}

						.row-box {
							display: flex;
							flex-direction: row;
							align-items: center;
							flex: 1;

							.Skuitem {
								width: 52rpx;
								height: 28rpx;
								background: #ededed;
								border-radius: 4rpx;
								margin-right: 6rpx;
								font-size: 20rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								text-align: left;
								color: #666666;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}

				.bottom {
					display: flex;
					flex-direction: row;
					align-items: center;

					.left {
						display: flex;
						flex-direction: column;
						// align-items: baseline;
						flex: 1;
						.rows{
							display: flex;
							flex-direction: row;
							align-items: baseline;
						}

						.red {
							color: #F37364;
						}

						.gray {
							color: #999999;
						}

						.fw1 {
							font-weight: 700;
						}

						.fw2 {
							font-weight: 500;
						}

						.size1 {
							font-size: 24rpx
						}

						.size2 {
							font-size: 32rpx
						}

						.size3 {
							font-size: 20rpx
						}

						.td {
							font-weight: 400;
							margin-left: 6rpx;
							text-decoration: line-through;
						}
					}

					.btn {
						width: 134rpx;
						height: 60rpx;
						background: #73F0EA;
						border-radius: 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: center;
						color: #ffffff;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>